
<template>
  <div class="app">
    <topbar/>
  <personbar/>
    <div class="container" >
      <div class="leftpart bg-ffffff">
       <div class="hmenu">
         <nuxt-link to='/person/collect'> 我的收藏</nuxt-link>
         <nuxt-link class="on" to='/person/exchange'> 交易记录</nuxt-link>
         <nuxt-link to='/person/setup'> 账号设置</nuxt-link>
       </div>

     <div class="exbox">
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="getRowClass">
          <el-table-column
            prop="exchangeID"
            label="交易号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="type"
            label="内容类型"
            width="100">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额"
            width="100">
          </el-table-column>
          <el-table-column
            prop="time"
            label="购买时间"
            width="150">
          </el-table-column>
        </el-table>

<!-- 分页  -->
    <div class="pagearea">
      共4条
      <div class="fr">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
    </div>
      </div>
      </div>
<!-- 左右分离-->
      <div class="rightpart">
          <Personright/>
       </div>

</div>
      <div class="gap100"></div>


 <Bottombar/>
  </div>
</template>

<script>
import Topbar from '~/components/Topbar.vue'
import Personbar from '~/components/Personbar.vue'
import Personright from '~/components/Personright.vue'
import Bottombar from '~/components/Bottombar.vue'
export default {
  components: {
    Topbar,
    Bottombar,
    Personbar,
    Personright
  },
  data(){
    return{
      isShare:false,
      tableData: [{
          exchangeID:'2222222221 ',
          type:'文章',
          title: '海市普陀区金沙江路1518弄',
          money: '￥1.25',
          time: '2016-06-01'
        }, {
          exchangeID:'2222222221 ',
          type:'文章',
          title: '海市普陀区金沙江路1518弄',
          money: '￥1.25',
          time: '2016-06-01'
        }, {
          exchangeID:'2222222221 ',
          type:'文章',
          title: '海市普陀区金沙江路1518弄',
          money: '￥1.25',
          time: '2016-06-01'
        }, {
          exchangeID:'2222222221 ',
          type:'文章',
          title: '海市普陀区金沙江路1518弄',
          money: '￥1.25',
          time: '2016-06-01'
        }]
    }
  },
  methods:{
    toggleShare(){
      this.isShare=!this.isShare;
    },
    zanup(){},
    zandown(){},
    getRowClass({ row, column, rowIndex, columnIndex }) {
  if (rowIndex == 0) {
      return 'background:#EFEFEF'
    } else {
        return ''
    }
   },

  }
}
</script>

<style scoped>
.hmenu{border-bottom:1px solid #F0F2F7; width: 100%; height: 52px; clear: both; padding:0 15px;}
.hmenu a{color:#1A1A1A; line-height: 50px; height: 50px; width: 65px; margin-right: 43px; display: inline-block; font-weight: 600;}
.on{ color: #225599 !important; border-bottom: 3px solid #0084FF;}
.exbox{ width: 100%; padding: 15px 25px 30px 15px; overflow: hidden;}
.pagearea{ width: 100%; margin-top: 18px;  color:#1F2D3D; font-size: 13px; line-height: 30px;}
.pagearea .fr{ float: right; }
</style>
